<template>
  <!-- 编辑信息主容器 -->
  <view class="edit-info-container">
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 用户名 -->
      <view class="form-item">
        <view class="label">用户名</view>
        <input
          v-model="formData.username"
          class="input"
          placeholder="请输入用户名"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <view class="label">手机号</view>
        <input
          v-model="formData.phone"
          class="input"
          placeholder="请输入手机号"
          type="number"
        />
        <view v-if="phoneError" class="error-message">{{ phoneError }}</view>
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <view class="label">性别</view>
        <!-- 性别选择下拉框 -->
        <picker
          :range="genderOptions"
          :range-key="'text'"
          :value="genderIndex"
          @change="onGenderChange"
          class="picker"
        >
          <view class="picker-display">
            {{ genderOptions[genderIndex].text }}
            <uni-icons type="down" size="18" class="arrow-icon"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 生日 -->
      <view class="form-item">
        <view class="label">生日</view>
        <!-- 生日时间选择器 -->
        <picker
          mode="date"
          :value="formData.birthday"
          start="1900-01-01"
          end="2099-12-31"
          @change="onBirthdayChange"
          class="picker"
        >
          <view class="picker-display">
            {{ formData.birthday || "请选择生日" }}
            <uni-icons type="down" size="18" class="arrow-icon"></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 个人签名 -->
      <view class="form-item">
        <view class="label">个人签名</view>
        <textarea
          v-model="formData.signature"
          class="textarea"
          placeholder="请输入个人签名"
          maxlength="150"
        ></textarea>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="btn-container">
      <!-- 使用view代替button -->
      <view class="save-btn" @click="saveForm">保存</view>
      <view class="reset-btn" @click="resetForm">重置</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

// 表单数据
const formData = reactive({
  username: '',
  phone: '',
  gender: 0, // 使用数值类型作为性别值
  birthday: '',
  signature: ''
});

// 性别选项
const genderOptions = ref([
  { value: 0, text: "男" },
  { value: 1, text: "女" },
  { value: 2, text: "保密" }
]);

// 当前性别索引
const genderIndex = ref(0);

// 手机号错误提示
const phoneError = ref('');

// 性别选择事件
const onGenderChange = (e) => {
  genderIndex.value = e.detail.value;
  formData.gender = genderOptions.value[genderIndex.value].value;
};

// 生日选择事件
const onBirthdayChange = (e) => {
  formData.birthday = e.detail.value;
};

// 手机号格式校验
const validatePhone = (phone) => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phone) {
    phoneError.value = '';
    return true;
  }
  if (!phoneRegex.test(phone)) {
    phoneError.value = '请输入有效的手机号';
    return false;
  }
  phoneError.value = '';
  return true;
};

// 监听手机号变化进行实时校验
watch(() => formData.phone, (newVal) => {
  validatePhone(newVal);
});

// 保存表单
const saveForm = () => {
  // 表单验证
  if (!formData.username) {
    uni.showToast({
      title: '用户名不能为空',
      icon: 'none'
    });
    return;
  }

  if (!formData.phone) {
    uni.showToast({
      title: '手机号不能为空',
      icon: 'none'
    });
    return;
  }

  if (phoneError.value) {
    uni.showToast({
      title: phoneError.value,
      icon: 'none'
    });
    return;
  }

  // 模拟保存逻辑
  console.log('保存用户信息:', formData);
  
  // 显示保存成功提示
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  });

  // 延迟返回上一页
  setTimeout(() => {
    uni.navigateBack();
  }, 1500);
};

// 重置表单
const resetForm = () => {
  // 重置表单数据
  formData.username = '';
  formData.phone = '';
  formData.gender = 0;
  formData.birthday = '';
  formData.signature = '';
  genderIndex.value = 0;
  phoneError.value = '';
};
</script>

<style lang="less" scoped>
/* 整体容器 */
.edit-info-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 表单容器 */
.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 表单项目 */
.form-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx 40rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .label + .input,
  .label + .picker,
  .label + .textarea {
    margin-top: 15rpx;
  }
}

/* 标签 */
.label {
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
}

/* 输入框、选择器、文本域通用样式 */
.input,
.picker-display,
.textarea {
  width: 100%;
  box-sizing: border-box; /* 关键修复：使用border-box盒模型 */
  font-size: 30rpx;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 12rpx;
}

/* 输入框 */
.input {
  height: 80rpx;
  padding: 0 20rpx;
  
  &::placeholder {
    color: #aaa;
  }
}

/* 选择器容器 */
.picker {
  width: 100%;
}

/* 选择器显示内容 */
.picker-display {
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
}

/* 下拉箭头 */
.arrow-icon {
  color: #999;
}

/* 文本域 */
.textarea {
  min-height: 180rpx;
  padding: 20rpx;
  line-height: 44rpx;
  
  &::placeholder {
    color: #aaa;
  }
}

/* 错误消息 */
.error-message {
  color: #ff4500;
  font-size: 26rpx;
  margin-top: 10rpx;
}

/* 按钮容器 */
.btn-container {
  display: flex;
  padding: 0 20rpx;
  gap: 30rpx;
  margin-top: 60rpx;
}

/* 保存按钮 */
.save-btn {
  flex: 1;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  font-size: 34rpx;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6rpx 20rpx rgba(59, 130, 246, 0.4);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 3rpx 10rpx rgba(59, 130, 246, 0.4);
  }
}

/* 重置按钮 */
.reset-btn {
  flex: 1;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #4b5563;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  font-size: 34rpx;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.05);
  }
}
</style>
  